{% extends 'myhome/base.html' %}
{% block title %}
    <title>订单确认页</title>
{% endblock %}

{% block css %}
    <link href="/static/myhome/css/cartstyle.css" rel="stylesheet" type="text/css" />
    <link href="/static/myhome/css/jsstyle.css" rel="stylesheet" type="text/css" />
{% endblock %}


{% block js %}
<script type="text/javascript" src="/static/myhome/js/address.js"></script>
{% endblock %}

{% block con %}
<div class="concent">
    <!--地址 -->
    <div class="paycont">
        <div class="address">
            <h3>确认收货地址</h3>
            <div class="control selected">
                <div class="tc-btn createAddr theme-login am-btn am-btn-danger">使用新地址</div></div>
            <div class="clear"></div>
            <ul>
            {% for v in addlist %}
                <div class="per-border"></div>
                <li  aid="{{ v.id }}"  class="user-addresslist {% if v.status == 1%} defaultAddr {% endif %} ">
                    <div class="address-left">
                        <div class="user DefaultAddr">
                            <span class="buy-address-detail">
                                <span class="buy-user">{{ v.name }}</span>
                                <span class="buy-phone">{{ v.phone }}</span></span>
                        </div>
                        <div class="default-address DefaultAddr">
                            <span class="buy-line-title buy-line-title-type">收货地址：</span>
                            <span class="buy--address-detail">
                                <span class="buy-address">{{ v.address }}</span>
                                <span class="buy-street">{{ v.xiangxi }}</span></span>
                        </div>
                        {% if v.status == 1 %}
                        <ins class="deftip">默认地址</ins>
                        {% endif %}
                    </div>
                    <div class="address-right">
                        <a href="../person/address.html">
                            <span class="am-icon-angle-right am-icon-lg"></span>
                        </a>
                    </div>
                    <div class="clear"></div>
                    <div class="new-addr-btn">
                        {% if v.status == 0 %}
                            <a href="javascript:void(0)" class="add-address" addressid="{{ v.id }}">设为默认</a>
                            <span class="new-addr-bar " >|</span>
                        {% endif %}
                        <a href="#">编辑</a>
                        <span class="new-addr-bar">|</span>
                        <a href="javascript:void(0);" onclick="delClick(this);">删除</a></div>
                </li>
            {% endfor %}

            </ul>
            <div class="clear"></div>
            <script type="text/javascript">
            $(function(){

                // 把页面中的默认地址id添加到表单中
                var aid =  $('.defaultAddr').attr('aid')
                $('input[type=hidden][name=addressid]').val(aid)
                

                // 替换地址
                $('.user-addresslist').click(function(){

                    $('.pay-address').find('.buy-user').text($(this).find('.buy-user').text())
                    $('.pay-address').find('.buy-phone').text($(this).find('.buy-phone').text())
                    $('.pay-address').find('.buy-address').text($(this).find('.buy-address').text())
                    $('.pay-address').find('.buy-street').text($(this).find('.buy-street').text())
                    
                    // 把选择的地址id添加到表单中
                    aid = $(this).attr('aid')
                    $('input[type=hidden][name=addressid]').val(aid)

                })

                // 设为默认
                $('.add-address').click(function(){
                    aid = $(this).attr('addressid')
                    // alert(aid)
                    // 发生ajax修改状态
                    $.get('{% url "myhome_addressedit" %}',{aid:aid},function(data){
                        if(data == 0){
                            location.href = location.href
                        }
                    })
                })
            })
            </script>
         
        </div>
       
        <div class="clear"></div>
        <!--支付方式-->
        <div class="logistics">
            <h3>选择支付方式</h3>
            <ul class="pay-list">
                <li class="pay card">
                    <img src="/static/myhome/images/wangyin.jpg">银联
                    <span></span></li>
                <li class="pay qq selected">
                    <img src="/static/myhome/images/weizhifu.jpg">微信
                    <span></span></li>
                <li class="pay taobao">
                    <img src="/static/myhome/images/zhifubao.jpg">支付宝
                    <span></span></li>
            </ul>
        </div>
        <div class="clear"></div>
        <!--订单 -->
        <div class="concent">
            <div id="payTable">
                <h3>确认订单信息</h3>
                <div class="cart-table-th">
                    <div class="wp">
                        <div class="th th-item">
                            <div class="td-inner">商品信息</div></div>
                        <div class="th th-price">
                            <div class="td-inner">单价</div></div>
                        <div class="th th-amount">
                            <div class="td-inner">数量</div></div>
                        <div class="th th-sum">
                            <div class="td-inner">金额</div>
                        </div>
                        <div class="th th-oplist">
                            <div class="td-inner">配送方式</div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="bundle  bundle-last">
                    <div class="bundle-main">
                    {% load pagetag %}
                    {% for v in data.items %}
                        <ul class="item-content clearfix">
                            <div class="pay-phone">
                                <li class="td td-item">
                                    <div class="item-pic">
                                        <a href="#" class="J_MakePoint">
                                            <img style="width: 80px;height: 80px" src="{{ v.pics }}" class="itempic J_ItemImg">
                                        </a>
                                    </div>
                                    <div class="item-info">
                                        <div class="item-basic-info">
                                            <a href="#" class="item-title J_MakePoint" data-point="tbcart.8.11">{{ v.title }}</a></div>
                                    </div>
                                </li>
                                
                                <li class="td td-price">
                                    <div class="item-price price-promo-promo">
                                        <div class="price-content">
                                            <em class="J_Price price-now">{{ v.price }}</em></div>
                                    </div>
                                </li>
                            </div>
                            <li class="td td-amount">
                                <div class="amount-wrapper ">
                                    <div class="item-amount ">
                                        <span class="phone-title">购买数量</span>
                                        <div class="sl">
                                            {{ v.num }}
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="td td-sum">
                                <div class="td-inner">
                                    <em tabindex="0" class="J_ItemSum number">{% cheng v.num v.price %}</em></div>
                            </li>
                            <li class="td td-oplist">
                                <div class="td-inner">
                                    <span class="phone-title">配送方式</span>
                                    <div class="pay-logis">
                                        包邮
                                    </div>
                                </div>
                            </li>
                        </ul>
                    {% endfor %}


                       
                    </div>
                </div>
          
                <div class="clear"></div>
                <div class="pay-total">
                    <!--留言-->
                    <div class="order-extra">
                        <div class="order-user-info">
                            <div id="holyshit257" class="memo">
                                <label>买家留言：</label>
                                <input type="text" title="选填,对本次交易的说明（建议填写已经和卖家达成一致的说明）" placeholder="选填,建议填写和卖家达成一致的说明" class="memo-input J_MakePoint c2c-text-default memo-close">
                                <div class="msg hidden J-msg">
                                    <p class="error">最多输入500个字符</p></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="clear"></div>
                </div>
                <!--含运费小计 -->
                <div class="buy-point-discharge ">
                    <p class="price g_price ">合计（含运费）
                        <span>¥</span>
                        <em class="pay-sum">{{ data.totalprice }}</em></p>
                </div>
                <!--信息 -->
                <div class="order-go clearfix">
                    <div class="pay-confirm clearfix">
                        <div class="box">
                            <div tabindex="0" id="holyshit267" class="realPay">
                                <em class="t">实付款：</em>
                                <span class="price g_price ">
                                    <span>¥</span>
                                    <em class="style-large-bold-red " id="J_ActualFee">{{ data.totalprice }}</em></span>
                            </div>
                            {% for v in addlist %}
                            {% if v.status == 1 %}
                            <div id="holyshit268" class="pay-address">
                                <p class="buy-footer-address">
                                    <span class="buy-line-title buy-line-title-type">寄送至：</span>
                                    <span class="buy--address-detail">
                                        <span class="buy-address">{{ v.address }}</span>
                                        <span class="buy-street">{{ v.xiangxi }}</span></span>
                                </p>
                                <p class="buy-footer-address">
                                    <span class="buy-line-title">收货人：</span>
                                    <span class="buy-address-detail">
                                        <span class="buy-user">{{ v.name }}</span>
                                        <span class="buy-phone">{{ v.phone }}</span></span>
                                </p>
                            </div>
                            {% endif %}
                            {% endfor %}
                        </div>
                        <div id="holyshit269" class="submitOrder">
                            <div class="go-btn-wrap">
                                <form action="{% url 'myhome_ordercreate' %}" method="post">
                                    {% csrf_token %}
                                    <input type="hidden" name="addressid" value="">
                                    <a  id="J_Go" href="javascript:void(0)" class="btn-go" tabindex="0" title="点击此按钮，提交订单">提交订单</a>
                                </form>
                                <script type="text/javascript">
                                    $('#J_Go').click(function(){
                                        // 判断是否选择了地址
                                        res = $('input[type=hidden][name=addressid]').val()
                                        if(res){
                                            $(this).parents('form').submit()
                                        }else{
                                            // 没有选择地址
                                            alert('请选择或添加收货地址')
                                        }
                                    })
                                </script>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-hd">
            <p>
                <a href="#">恒望科技</a>
                <b>|</b>
                <a href="#">商城首页</a>
                <b>|</b>
                <a href="#">支付宝</a>
                <b>|</b>
                <a href="#">物流</a></p>
        </div>
        <div class="footer-bd">
            <p>
                <a href="#">关于恒望</a>
                <a href="#">合作伙伴</a>
                <a href="#">联系我们</a>
                <a href="#">网站地图</a>
                <em>© 2015-2025 Hengwang.com 版权所有</em></p>
        </div>
    </div>
</div>
{% endblock %}

{% block f %}
<div class="theme-popover-mask" style="display: none; height: 678px;"></div>
<div class="theme-popover" style="overflow: hidden; display: none;">

    <!--标题 -->
    <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add address</small></div>
    </div>
    <hr>

    <div class="am-u-md-12">
        <form class="am-form am-form-horizontal">

            <div class="am-form-group">
                <label for="user-name" class="am-form-label">收货人</label>
                <div class="am-form-content">
                    <input type="text" name="name" id="user-name" placeholder="收货人">
                </div>
            </div>

            <div class="am-form-group">
                <label for="user-phone" class="am-form-label">手机号码</label>
                <div class="am-form-content">
                    <input id="user-phone" name="phone" placeholder="手机号必填" type="text">
                </div>
            </div>

            <div class="am-form-group">
                <label for="user-phone" class="am-form-label">所在地</label>
                <div class="am-form-content address" id="city">
                    <select name ='address'></select>


                    <script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"></script>
                    <script type="text/javascript">
                        // 发送ajax获取所有的 直辖市和省 信息
                        $.get('{% url "getcity" %}',{upid:0},function(data){
                            str = ''
                            for (var i = 0; i < data.length; i++) {
                                str+= '<option value="'+data[i].id+'">'+data[i].name+'</option>'
                            }
                            $('select:eq(0)').html(str)
                        },'json')

                        // 绑定 change事件
                        $('select').live('click',function(){
                            // 移除当前元素之后的所有同级元素
                            $(this).nextAll().remove()

                            // 获取当前选中的城市的id号
                            id = $(this).val()
                            
                            // 发送ajax请求 新的城市信息
                            $.get('{% url "getcity" %}',{upid:id},function(data){
                                // 判断当前返回的数据如果为空,则不在继续执行
                                if(data.length == 0){return}

                                // 把获取到的城市信息,组装成 下拉选项
                                str = ''
                                for (var i = 0; i < data.length; i++) {
                                    str+= '<option value="'+data[i].id+'">'+data[i].name+'</option>'
                                }
                                // 动态创建select下拉框
                                s = $('<select name="address"></select>')
                                s.html(str)
                                $('#city').append(s)

                            },'json')
                        })



                    </script>
                </div>
            </div>

            <div class="am-form-group">
                <label for="user-intro" class="am-form-label">详细地址</label>
                <div class="am-form-content">
                    <textarea name="xiangxi" class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                    <small>100字以内写出你的详细地址...</small>
                </div>
            </div>

            <div class="am-form-group theme-poptit">
                <div class="am-u-sm-9 am-u-sm-push-3">
                    <div class="am-btn am-btn-danger add-new-address">保存</div>
                    <div class="am-btn am-btn-danger close">取消</div>
                </div>
            </div>
        </form>
    </div>

    <script type="text/javascript">
        $('.add-new-address').click(function(){
            // 获取收货人,电话,地址,详细.,发送ajax
            var name = $(this).parents('form').find('input[name=name]').val()        
            var phone = $(this).parents('form').find('input[name=phone]').val()
            var address = []
            $(this).parents('form').find('select[name=address]').each(function(){
                address.push($(this).val())
            })
            var xiangxi = $(this).parents('form').find('textarea[name=xiangxi]').val()        
            // 把新添加的地址信息,拼接成对象
            console.log(address)
            data = {'name':name,'phone':phone,'address':address,'xiangxi':xiangxi}
            // 把对象转成json.,发送
            data = JSON.stringify(data)


            $.get('{% url "myhome_addressadd"%}',{data:data},function(data){
                if(data == 0){
                    location.href = location.href;
                }
            })
        })
    </script>

</div>
{% endblock %}
